<template>
  <div id="mapContainer">
    <!-- <EchartBox/> -->
    <div class="echarts-box">
      <PIEEchartBox class="pie-echart-box" :options="state"></PIEEchartBox>
      <PIEEchartBox class="pie-echart-box1" :options="state1"></PIEEchartBox>
      <PIEEchartBox class="pie-echart-box2" :options="state2"></PIEEchartBox>
    </div>
    <PIEDataCollect :selectList="buttonName" :tableData="tableData1" :fields="fields" class="pie-table"
      :mainTitle="'非实时数据汇集子系统'">
    </PIEDataCollect>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  onMounted,
  toRefs,
  getCurrentInstance,
} from "vue";
import baseMap from '@/plugins/lib/baseMaps';
import EchartBox from '../components/echartBox/index.vue'
// import myTable from '@/components/table/my-table.vue'
onMounted(() => {
  initMap()
})
let buttonName = [
  { value: "接收配置", label: "接收配置" },
  { value: "任务管理", label: "任务管理" },
  { value: "数据查询", label: "数据查询" },
  { value: "数据查询", label: "微服务管理" },
]; //按钮标题
let tableData1 = [
  {
    name: "国外地震001",
    status: "1",
    load: "20%",
  },
  {
    name: "国外地震002",
    status: "1",
    load: "10%",
  },
  {
    name: "国外地震002",
    status: "0",
    load: "10%",
  },
  {
    name: "国外地震002",
    status: "0",
    load: "10%",
  },
  {
    name: "国外地震002",
    status: "0",
    load: "10%",
  },
  {
    name: "国外地震002",
    status: "0",
    load: "10%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
  {
    name: "国外地震001",
    status: "0",
    load: "20%",
  },
]; //表格数据
let fields = [
  { label: "配置", prop: "name" },
  {
    label: "状态", prop: "status",
    isTemplate: true
  },
  { label: "负载", prop: "load" },
]; //表头
const state = reactive({
  title: {
        text: '数据量',
        textStyle: { // 设置颜色
          color: 'white',
          fontSize : 12
        }
      },
        //鼠标经过时的气泡说明
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        }
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      //X轴
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true,
            // show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white',  //更改坐标轴文字颜色
              fontSize: 10      //更改坐标轴文字大小
            }
          },
        }
      ],
      //Y轴
      yAxis: [
        {
          type: 'value',
          data: ['0.2', '0.4', '0.6', '0.8', '1.0'],
          splitLine: {
            show: false//Y轴背景线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#b7b7b8',  //更改坐标轴文字颜色
              fontSize: 10     //更改坐标轴文字大小
            }
          },
        }
      ],
      series:  
        [
          {
            name: '直接访问',
            type: 'line',
            barWidth: '60%',
            //折线的高度
            data: [1, 344, 310, 330, 250, 450, 200, 300, 400, 160],
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#11ebf3' //折线颜色
                }
              }
            },
          }
        ]
});

const state1 = reactive({
  title: {
        text: '数据量',
        textStyle: { // 设置颜色
          color: 'white',
          fontSize : 12
        }
      },
        //鼠标经过时的气泡说明
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        }
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      //X轴
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true,
            // show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white',  //更改坐标轴文字颜色
              fontSize: 10      //更改坐标轴文字大小
            }
          },
        }
      ],
      //Y轴
      yAxis: [
        {
          type: 'value',
          data: ['0.2', '0.4', '0.6', '0.8', '1.0'],
          splitLine: {
            show: false//Y轴背景线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#b7b7b8',  //更改坐标轴文字颜色
              fontSize: 10     //更改坐标轴文字大小
            }
          },
        }
      ],
      series:  
        [
          {
            name: '直接访问',
            type: 'line',
            barWidth: '60%',
            //折线的高度
            data: [300, 344, 310, 330, 250, 450, 200, 300, 400, 160, 390, 90],
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#11ebf3' //折线颜色
                }
              }
            },
          }
        ]
});
// const state2 = reactive({
const state2 = reactive({
  title: {
        text: '数据量',
        textStyle: { // 设置颜色
          color: 'white',
          fontSize : 12
        }
      },
        //鼠标经过时的气泡说明
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        }
      },

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      //X轴
      xAxis: [
        {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true,
            // show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white',  //更改坐标轴文字颜色
              fontSize: 10      //更改坐标轴文字大小
            }
          },
        }
      ],
      //Y轴
      yAxis: [
        {
          type: 'value',
          data: ['0.2', '0.4', '0.6', '0.8', '1.0'],
          splitLine: {
            show: false//Y轴背景线
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#b7b7b8',  //更改坐标轴文字颜色
              fontSize: 10     //更改坐标轴文字大小
            }
          },
        }
      ],
      series:  
        [
          {
            name: '直接访问',
            type: 'line',
            barWidth: '60%',
            //折线的高度
            data: [133, 344, 310, 330, 250, 450, 1, 200, 300, 4, 390, 90],
            showSymbol: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#11ebf3' //折线颜色
                }
              }
            },
          }
        ]
});



let baseMapObj: any = null
let map: any = null
// let tableData=[
//   {
//     name:'1321',
//     size:'3564356'
//   },
//    {
//     name:'1321',
//     size:'3564356'
//   }
// ]
// let fields=[
//    { label: "名称", prop: "name" },
//    { label: "大小", prop: "size" },
// ]

// 初始化地图
const initMap = () => {
  baseMapObj = new baseMap({
    container: "mapContainer",
    zoom: 3,
    // center: [123.31054687499999, 36.38591277287651],
  });

  map = baseMapObj.map;
  map.on("load", function () {
    // addAreaString();
    // addPointString();
  });
}
</script>

<style lang="less" scoped>
#mapContainer {
  width: 100%;
  height: 100%;
  position: relative;

  .pie-table {
    position: absolute;
    top: @global-margin;
    left: @global-margin;
    bottom: 50px;
  }

  /deep/.left-dialog .big-button .my-button .button-inner {
    padding: 10px 10px;
  }
}

.echarts-box {
  //margin: 20px;
  position: absolute;
  top: @global-margin;
  right: @global-margin;
  bottom: 50px;
  background-color: rgba(15, 49, 112, 0.6);

  z-index: 20;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  .pie-echart-box {
    //background-color: rgba(15, 49, 112, 0.6);
    padding: 10px;
    // position: absolute;
    // top: 50px;
    // right: 50px;
    // z-index: 20;
  }

  .pie-echart-box1 {
    //background-color: rgba(15, 49, 112, 0.6);
    padding: 20px;
    // position: absolute;
    // top: 50px;
    // right: 50px;
    // z-index: 20;
  }

  .pie-echart-box2 {
    //background-color: rgba(15, 49, 112, 0.6);
    padding: 20px;
    // position: absolute;
    // top: 50px;
    // right: 50px;
    // z-index: 20;
  }

}
</style>